<template>
	<view class="">
		<!-- 本页 -->
		<view class="container" :style="{
			zIndex:zIndex,
			backgroundColor: bgColor, 
			transform: `${transform}`, 
			transition: `transform ${showAnimation?turnPageTime:0}s`,
			boxShadow: showShadow&&turnType===0?'0 0 10px 0 rgba(0,0,0,.4)':'',
		}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @touchcancel="touchcancel">
			<!-- 章节名 -->
			<view class="chapter">{{chapterName}}</view>
			<view class="content">
				<view class="inner-box" :style="{height: `${innerHeight}px`}">
					<view class="book-inner" v-html="content" :style="{
						fontSize: `${fontSize}px`, 
						lineHeight: `${lineHeight*fontSize}px`,
						color: `${textColor}`,
						transform: `translateY(-${pageNum*innerHeight}px)`
					}">
					</view>
				</view>
			</view>
			<view class="bottom-bar">
				<!-- 时间 -->
				<view>
					{{systemTimeStr}}
				</view>
				<!-- 页码 -->
				<view>
					{{pageNum + 1}}/{{totalPage}}
				</view>
				<!-- 电量 -->
				<view>
					<!-- #ifdef APP-PLUS -->
					<battery></battery>
					<!-- #endif -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			// 是否可以触发出触摸滑动方法
			isTouch: {
				type: Boolean,
				default: false
			},
			// 层级
			zIndex: {
				type: Number,
				default: 1
			},
			// 背景色
			bgColor: {
				type: String,
				default: '#cdeeda'
			},
			// 字体颜色
			textColor: {
				type: String,
				default: '#000'
			},
			// 偏移
			transform: {
				type: String,
				default: '(0,0)'
			},
			// 偏移时是否进行动画
			showAnimation: {
				type: Boolean,
				default: false
			},
			// 动画进行时间
			turnPageTime: {
				type: Number,
				default: .5
			},
			// 是否显示阴影
			showShadow: {
				type: Boolean,
				default: false
			},
			// 翻页方式
			turnType: {
				type: Number,
				default: 0
			},
			// 章节名称
			chapterName: {
				type: String,
				default: ''
			},
			// 截取至整行的最大高度
			innerHeight: {
				type: Number,
				default: 0
			},
			// 内容
			content: {
				type: String,
				default: ''
			},
			// 字体大小
			fontSize: {
				type: Number,
				default: 16
			},
			// 行高
			lineHeight: {
				type: Number,
				default: 1.5
			},
			// 章节分页后,当前页所在的页数
			pageNum: {
				type: Number,
				default: 0
			},
			// 章节分页后的总页数
			totalPage: {
				type: Number,
				default: 1
			},
			// 系统时间
			systemTimeStr: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				fullScreen: false
			}
		},
		mounted() {
			// #ifdef APP-PLUS
			// 取消ios左滑返回
			let page = this.$mp.page.$getAppWebview()
			page.setStyle({
				popGesture: 'none'
			})
			// #endif

			this.setFullscreen(true)
		},
		destroyed() {
			this.setFullscreen(false)
		},
		methods: {
			setFullscreen(data) {
				// #ifdef APP-PLUS
				// 退出全屏
				plus.navigator.setFullscreen(data)
				this.fullScreen = data
				// #endif
			},
			touchStart(e) {
				if (this.isTouch) {
					this.$emit('touch-start', e)
				}
			},
			touchMove(e) {
				if (this.isTouch) {
					this.$emit('touch-move', e)
				}
			},
			touchEnd(e) {
				if (this.isTouch) {
					this.$emit('touch-end', e)
				}
			},
			touchcancel(e) {
				if (this.isTouch) {
					this.$emit('touch-cancel', e)
				}
			},
		}
	}
</script>

<style lang="scss">
	.container {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100%;
		padding: var(--status-bar-height) 40rpx 0;
		overflow: hidden;
		color: #808080;
		box-sizing: border-box;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;

		.chapter {
			font-size: 14px;
			color: currentColor;
			height: 30px;
			width: 100%;
			padding-bottom: 10px;
			line-height: 30px;
		}

		.bottom-bar {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 30px;
			padding: 0px 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			color: currentColor;
		}

		.content {
			width: 100%;
			flex: 0 0 auto;
			overflow: hidden;

			.inner-box {
				overflow: hidden;
			}
		}
	}
</style>
